<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
	<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
		<!DOCTYPE html>
		<html>

		<head>
			<!-- 必须的 meta 标签 -->
			<meta charset="utf-8">
			<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

			<title>GameHub商城</title>
			<!-- Bootstrap 的 CSS 文件 -->
			<link rel="stylesheet" href="${pageContext.request.contextPath}/font/stylesheet.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/css/global.css">
			<link rel="stylesheet" href="${pageContext.request.contextPath}/css/order.min.css">
			<script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
			<script src="${pageContext.request.contextPath}/js/bootstrap.bundle.min.js"></script>
			<script>
				$(function () {
					$.get("${pageContext.request.contextPath}/address/getProvince", "", function (data) {
						var str = '';
						var $province = $("#container-province")

						for (var key in data) {
							str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
						}
						$province.append(str)
					}, "json")
					$.get("${pageContext.request.contextPath}/address/findByUid", "", function (data) {
						showAddress(data)
					}, "json")
				})
				var pattern_password = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
				var password_old_flag = true; password_new_flag = false; password_confirm_flag = false;
				function change(obj) {
					var block = obj.querySelector(".d-block");
					var none = obj.querySelector(".d-none");
					none.setAttribute("class", none.getAttribute("class").replaceAll("d-none", "d-block"));
					block.setAttribute("class", block.getAttribute("class").replaceAll("d-block", "d-none"));
					var input = obj.parentNode.querySelector("input");
					if (none.getAttribute("class").indexOf("slash") !== -1) {
						input.setAttribute("type", "password");
					} else {
						input.setAttribute("type", "text");
					}
				}
				function boxfocus(obj) {
					var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];
					var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
					var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
					div.setAttribute("class", div.getAttribute("class") + " inputactive");
					fieldset.setAttribute("class", fieldset.getAttribute("class").replaceAll(" fieldset-warning", ""));
					fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-focus")
					p.innerHTML = "";
				}
				function boxblur(obj) {
					var div = obj.parentNode.parentNode.getElementsByTagName("label")[0];
					var fieldset = obj.parentNode.getElementsByTagName("fieldset")[0];
					fieldset.setAttribute("class", fieldset.getAttribute("class").replaceAll(" fieldset-focus", ""));
					var p = obj.parentNode.parentNode.parentNode.getElementsByTagName("p")[0];
					var $text = $(obj).closest("section").find("input").attr("name")
					if (!obj.value) {
						fieldset.setAttribute("class", fieldset.getAttribute("class") + " fieldset-warning")
						div.setAttribute("class", div.getAttribute("class").replaceAll(" inputactive", ""));
						p.innerHTML = "必填"
					} else {
						can_submit();
					}
				}
				function can_submit() {
					// 	          var button = document.getElementById("button-changepassword")
					// 	          if(password_old_flag&&password_new_flag&&password_confirm_flag){

					// 	            button.removeAttribute("disabled");
					// 	          }else {
					// 	            button.setAttribute("disabled","");
					// 	          }
				}

				function getAddress(obj) {
					$addr = $(obj).closest(".container").attr("id")
					var address = obj.innerHTML;
					var input = obj.parentNode.parentNode.parentNode.getElementsByTagName("input")[0];
					input.value = address;

					switch ($addr) {
						case 'container-province':
							var id = $(obj).attr("data-id")
							var $input = $("#address-province")
							$input.attr("data-id", id)

							var $city = $("#container-city")
							$.get("${pageContext.request.contextPath}/address/getCity", "id=" + id, function (data) {
								var str = '';
								for (var key in data) {
									str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
								}
								$city.html(str)
							}, "json")
							break
						case 'container-city':
							var id = $(obj).attr("data-id")
							var $input = $("#address-city")
							$input.attr("data-id", id)
							var pid = $("#address-province").attr("data-id")
							var $city = $("#container-area")
							$.get("${pageContext.request.contextPath}/address/getArea?id=" + id + "&pid=" + pid, function (data) {
								var str = '';
								for (var key in data) {
									str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
								}
								$city.html(str)
							}, "json")
							break
						case 'container-area':
							var id = $(obj).attr("data-id")
							var $input = $("#address-area")
							$input.attr("data-id", id)
							var $city = $("#container-town")
							var pid = $("#address-province").attr("data-id")

							var cid = $("#address-city").attr("data-id")

							$.get("${pageContext.request.contextPath}/address/getTown?id=" + id + "&pid=" + pid + "&cid=" + cid, function (data) {
								var str = '';
								for (var key in data) {
									str += '<a class="dropdown-item py-0" onclick="getAddress(this)" href="#" data-id="' + key + '">' + data[key] + '</a>'
								}
								$city.html(str)
							}, "json")
							break
					}

				}

				function choose(obj) {
					var $group = $(obj)
					var $btns = $group.closest(".group").find(".btn")
					var flag = false
					$btns.each(function () {
						var $btn = $(this)

						if ($btn.hasClass("active")) {
							flag = true
							// $btn.button('dispose') 
						}
					})
					// .addClass("active")
					if (flag) {
						$btns.removeClass("active")
					} else {
						$group.addClass("active")
					}
				}

				function sumbitAddress() {
					var $provinceid = $("#address-province").val()
					var $cityid = $("#address-city").val()
					var $areaid = $("#address-area").val()
					var $townid = $("#address-town").val()
					var $address = $("#address-detail").val()
					var $name = $("#username").val()
					var $phone = $("#phonenumber").val()
					var $email = $("#email").val()
					alert($provinceid + $cityid + $areaid + $townid + $address + $name + $phone + $email)
					$.get("${pageContext.request.contextPath}/address/add", { "province": $provinceid, "city": $cityid, "area": $areaid, "town": $townid, "detailAddr": $address, "username": $name, "phone": $phone, "email": $email }, function (data) {
						showAddress(data)
						$('#addressModal').modal('hide')
					}, "json")
				}

				function showAddress(data) {
					$ul = $("#address-list");
					str = ""
					for (var i in data) {
						str += '<li class="d-flex align-items-center"> '
							+ '<div class="btn btn-dark px-5 chooseaddr" onclick="choose(this)" data-addressId="' + data[i].id + '">' + data[i].username + '</div>'
							+ '<div class="address d-flex align-items-center">'
							+ '<span>' + data[i].province + '</span>'
							+ '<span>' + data[i].city + '</span>'
							+ ' <span>' + data[i].area + '</span>'
							+ '<span>' + data[i].town + '</span>'
							+ '<span>' + data[i].detailAddr + '</span>'
							+ '</div>'
							+ '<div>'
							+ '<span class="phone">' + data[i].phone + '</span>'
							+ '</div>'
							+ '</li>'
					}
					$("#address-list").html(str)
				}
				function submitOrder() {
					alert($("#address-list").find(".active").attr("class"))
					var str = "${pageContext.request.contextPath}/order/submitOrder?addrid=" + $("#address-list").find(".active").attr("data-addressId")
					alert(str)
					location.href = str
				}
			</script>
		</head>

		<body>
			<!-- 地址模态框 -->
			<div class="modal fade" id="addressModal" tabindex="-1" aria-labelledby="addressModalLabel"
				aria-hidden="true">
				<div class="modal-dialog modal-dialog-centered">
					<div class="modal-content bg-dark">
						<div class="modal-header">
							<h5 class="modal-title" id="addressModalLabel">新增收货地址</h5>
							<button type="button" class="close" data-dismiss="modal" aria-label="Close">
								<span aria-hidden="true">&times;</span>
							</button>
						</div>
						<div class="modal-body main">
							<!-- 地址表单 -->
							<form action="" class="d-flex flex-column align-items-center justify-content-between p-4">
								<div class="d-flex mb-4">
									<!-- 省选择框 -->
									<div class="dropdown">
										<section id="province-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
											onblur="boxblur(this)">
											<div class="position-relative input">
												<label for="address-province"
													class="position-absolute label inputactive"
													id="label-province">省/直辖市</label>
												<div class="position-relative">
													<input id="address-province" type="text" class="dropdown-toggle"
														name="address-province" data-id="">
													<fieldset class="position-absolute rounded" aria-hidden="true">
													</fieldset>
												</div>
											</div>
											<p class="position-absolute"></p>
											<div class="dropdown-menu p-0 m-0" aria-labelledby="province-dropdownMenu">
												<div class="container p-0 m-0 rounded" id="container-province">
												</div>
											</div>
										</section>

									</div>
									<!-- 市选择框 -->
									<div class="dropdown">
										<section id="city-dropdownMenu" data-toggle="dropdown" aria-expanded="false"
											onblur="boxblur(this)">
											<div class="position-relative input">
												<label for="address-city" class="position-absolute label inputactive"
													id="label-city">市</label>
												<div class="position-relative">
													<input id="address-city" type="text" class="dropdown-toggle"
														name="address-city" data-id="">
													<fieldset class="position-absolute rounded" aria-hidden="true">
													</fieldset>
												</div>
											</div>
											<p class="position-absolute"></p>
											<div class="dropdown-menu p-0 m-0" aria-labelledby="city-dropdownMenu">
												<div class="container p-0 m-0 rounded" id="container-city">
												</div>
											</div>
										</section>

									</div>
								</div>
								<div class="d-flex mb-4">
									<!-- 区县选择框 -->
									<div class="dropdown">
										<section id="district-dropdownMenu1" data-toggle="dropdown" aria-expanded="false"
											onblur="boxblur(this)">
											<div class="position-relative input">
												<label for="address-area"
													class="position-absolute label inputactive"
													id="label-area">区/县</label>
												<div class="position-relative">
													<input id="address-area" type="text" class="dropdown-toggle"
														name="address-district" data-id="">
													<fieldset class="position-absolute rounded" aria-hidden="true">
													</fieldset>
												</div>
											</div>
											<p class="position-absolute"></p>
											<div class="dropdown-menu p-0 m-0" aria-labelledby="district-dropdownMenu1">
												<div class="container p-0 m-0 rounded" id="container-area">

												</div>
											</div>
										</section>

									</div>
									<!-- 街道选择框 -->
									<div class="dropdown">
										<section id="district-dropdownMenu2" data-toggle="dropdown" aria-expanded="false"
											onblur="boxblur(this)">
											<div class="position-relative input" >
												<label for="address-town"
													class="position-absolute label inputactive"
													id="label-district">街道</label>
												<div class="position-relative">
													<input id="address-town" type="text" class="dropdown-toggle"
														name="address-district" data-id="">
													<fieldset class="position-absolute rounded" aria-hidden="true">
													</fieldset>
												</div>
											</div>
											<p class="position-absolute"></p>
											<div class="dropdown-menu p-0 m-0" aria-labelledby="district-dropdownMenu2">
												<div class="container p-0 m-0 rounded" id="container-town">
												</div>
											</div>
										</section>

									</div>
								</div>
								<section class="mb-4">
									<div class="position-relative input">
										<label for="address-detail" class="position-absolute label"
											id="address-detail-id">详细地址</label>
										<div class="position-relative">
											<input id="address-detail" type="text" name="address-detail"
												onclick="boxfocus(this)" onblur="boxblur(this)">
											<fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
										</div>
									</div>
									<p class="position-absolute" style="color: #DE3341;"></p>
								</section>
								<section class="mb-4">
									<div class="position-relative input" id="func">
										<label for="username" class="position-absolute label">收货人</label>
										<div class="position-relative">
											<input id="username" type="text" name="username" onclick="boxfocus(this)"
												onblur="boxblur(this)">
											<fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
										</div>
									</div>
									<p class="position-absolute" style="color: #DE3341;"></p>
								</section>
								<section class="mb-4">
									<div class="position-relative input">
										<label for="email" class="position-absolute label" >手机号</label>
										<div class="position-relative">
											<input id="phonenumber" type="number" name="phonenumber"
												onfocus="boxfocus(this)" onblur="boxblur(this)">
											<fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
										</div>
									</div>
									<p class="position-absolute" style="color: #DE3341;"></p>
								</section>
								<section class="mb-4">
									<div class="position-relative input">
										<label for="email" class="position-absolute label" id="labelid">电子邮箱</label>
										<div class="position-relative">
											<input id="email" type="email" name="email" onfocus="boxfocus(this)"
												onblur="boxblur(this)">
											<fieldset class="position-absolute rounded" aria-hidden="true"></fieldset>
										</div>
									</div>
									<p class="position-absolute" style="color: #DE3341;"></p>
								</section>


							</form>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
							<button type="button" class="btn btn-primary" onclick="sumbitAddress()">保存地址</button>
						</div>
					</div>
				</div>
			</div>
			<!-- 头部导航标签 -->
			<nav class="navbar navbar-expand-lg ">
				<a class="navbar-brand" href="#"><img src="../img/logo.png" alt="" height="40px"
						class="d-inline-block align-top"></a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
					aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="navbarText">
					<ul class="navbar-nav mr-auto">
						<li class="nav-item active">
							<a class="nav-link" href="#">商城 <span class="sr-only">(current)</span></a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">榜单</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">帮助</a>
						</li>
						<li class="nav-item">
							<a class="nav-link" href="#">常见问题</a>
						</li>
					</ul>
          <a href="${pageContext.request.contextPath}/pages/regest.jsp" class="navbar-text">注册</a>
          <c:if test="${not empty user}">
            <a href="${pageContext.request.contextPath}/user/exit" class="navbar-text">退出账户</a>
          </c:if>
          <c:if test="${empty user}">
            <a href="${pageContext.request.contextPath}/pages/login.jsp" class="navbar-text">登录</a>
          </c:if>
				</div>
			</nav>
			<!-- 搜索和商城导航栏 -->
			<div class="container mx-auto px-0 mb-2 sticky-top" id="banner-search">
				<div class="row px-0">
					<div class="col-md-1"></div>
					<nav class="col-lg-10 col-md-10 navbar navbar-expand-lg px-0" id="test">
						<a class="navbar-brand" href="#">
							<div class="input-group">
								<div class="input-group-prepend">
									<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
										class="bi bi-search" viewBox="0 0 16 16">
										<path
											d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
									</svg>
									<!-- <span class="input-group-text" id="basic-addon1">@</span> -->
								</div>
								<input type="text" class="form-control" placeholder="Username" aria-label="Username"
									aria-describedby="basic-addon1">
							</div>
						</a>
						<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText2"
							aria-controls="navbarText2" aria-expanded="false" aria-label="Toggle navigation">
							<span class="navbar-toggler-icon"></span>
						</button>
						<div class="collapse navbar-collapse" id="navbarText2">
							<ul class="navbar-nav mr-auto">
								<li class="nav-item active">
									<a class="nav-link" href="#">探索 <span class="sr-only">(current)</span></a>
								</li>
								<li class="nav-item">
									<a class="nav-link" href="#">浏览</a>
								</li>
							</ul>
              <c:if test="${not empty user}">
                <span class="navbar-text">欢迎${user.username}</span>
                <a href="${pageContext.request.contextPath}/pages/personal.jsp" class="navbar-text">个人中心</a>
                <a class="navbar-text">愿望清单</a>
                <a href="${pageContext.request.contextPath}/cart/getUserCart" class="navbar-text">购物车<span class="badge badge-light ml-1">4</span></a>
              </c:if>
						</div>
					</nav>
					<div class="col-md-1"></div>
				</div>
			</div>
			<main class="container mx-auto px-0 ">
				<div class="row px-0 ">
					<div class="col-1"></div>
					<!-- 页面主体 -->
					<div class="col-10 shoppingCart">
						<div class="row main-title">
							确认订单
						</div>

						<div class="row body d-flex flex-row">
							<section class="col flex-grow-1 items ">
								<div class="row subline rounded">
									<div class="col">
										<div class="d-flex justify-content-between">
											<span class="title">选择地址</span>
											<a href="" data-toggle="modal" data-target="#addressModal">新增收货地址？</a>
										</div>
										<ul class="addresses group btn-group-lg" id="address-list">
											<li class="d-flex align-items-center">
												<div class="btn btn-dark px-5" onclick="choose(this)" data-addressId="">
													kk</div>
												<div class="address d-flex align-items-center">
													<span>四川省</span>
													<span>成都市</span>
													<span>高新区</span>
													<span>高新街道</span>
													<span>xx路xx号1111</span>
												</div>
												<div>
													<span class="phone">156****5555</span>
												</div>
											</li>
											<li class="d-flex align-items-center">
												<div class="btn btn-dark px-5" onclick="choose(this)" data-addressId="">
													kk</div>
												<div class="address d-flex align-items-center">
													<span>四川省</span>
													<span>成都市</span>
													<span>高新区</span>
													<span>高新街道</span>
													<span>xx路xx号1111</span>
												</div>
												<div>
													<span class="phone">156****5555</span>
												</div>
											</li>
											<li class="d-flex align-items-center">
												<div class="btn btn-dark px-5" onclick="choose(this)" data-addressId="">
													kk</div>
												<div class="address d-flex align-items-center">
													<span>四川省</span>
													<span>成都市</span>
													<span>高新区</span>
													<span>高新街道</span>
													<span>xx路xx号1111</span>
												</div>
												<div>
													<span class="phone">156****5555</span>
												</div>
											</li>

										</ul>
									</div>
								</div>
								<div class="row subline  rounded">
									<div class="col order-detail">
										<div class="title order-title">
											订单详情
										</div>
										<div class="game-desc">
											<div class="row head">
												<div class="col-6 text-center">商品</div>
												<div class="col-2 text-center">单价</div>
												<div class="col-2 text-center">数量</div>
												<div class="col-2 text-center">小计</div>
											</div>
											<ul id="game-list">
												<c:forEach begin="0" end="${order.count - 1}" var="index">
													<li class="row details d-flex align-items-center">
														<div class="col-6 d-flex align-items-center">
															<img class="rounded"
																src="${order.gamecount[index].game.game_src}" alt="">
															<div
																class="flex-grow-1 text-center  justify-content-center name">
																${order.gamecount[index].game.game_name}</div>
														</div>
														<div class="col-2 text-center">
															￥${order.gamecount[index].game.game_final_price}</div>
														<div class="col-2 text-center">
															${order.gamecount[index].gamecount}</div>
														<div class="col-2 text-center">
															￥${order.gamecount[index].finalprice}</div>
													</li>
												</c:forEach>



											</ul>
										</div>
									</div>

								</div>
								<div class="row main rounded">
								</div>
							</section>


							<aside class="flex-shrink-0 d-flex flex-column sum">
								<div class="title">游戏和应用概览</div>
								<div class="price d-flex flex-row justify-content-between">
									<span>价格</span>
									<span>￥${order.origin_price}</span>
								</div>
								<div class="price d-flex flex-row justify-content-between">
									<span>特卖折扣</span>
									<span>-￥${order.totalDiscount}</span>
								</div>
								<div class="total d-flex flex-row justify-content-between">
									<span>总计</span>
									<span>￥${order.final_price}</span>
								</div>
								<button href="" class="btn btn-primary" id="submit-order"
									onclick="submitOrder()">提交订单</button>

							</aside>
						</div>
					</div>

					<div class="col-1"></div>
				</div>
			</main>

		</body>

		</html>